<template>
  <svg 
    @click="watchStart"
    xmlns="http://www.w3.org/2000/svg" 
    width="90" 
    height="90" 
    viewBox="0 0 100 100"
    aria-labelledby="watch"
    role="presentation"
    >
    <title id="watch" lang="en">Watch with a hand that moves</title>
    <path fill="#fff" d="M0 0h100v100H0z"/>
    <path d="M24.4 34.1l-2.4-.2a15.1 15.1 0 0 1-10-6.2 15.5 15.5 0 0 1-2.7-11.6A15.4 15.4 0 0 1 24.5 2.9l2.4.2a15.5 15.5 0 0 1 12.8 17.8 15.5 15.5 0 0 1-15.3 13.2zm.1-27.4a11.7 11.7 0 0 0-11.5 10 11.3 11.3 0 0 0 2.1 8.7 10.7 10.7 0 0 0 7.5 4.7l1.8.2a11.6 11.6 0 0 0 11.5-10 11.7 11.7 0 0 0-9.6-13.5z" fill="#d6dee1"/>
    <path d="M22.5 35.4l-2.5-.2a15.9 15.9 0 0 1-10.6-6.6 16.5 16.5 0 0 1-2.8-12.2 16.2 16.2 0 0 1 16-13.8 11.4 11.4 0 0 1 2.6.2 16.3 16.3 0 0 1 13.4 18.7 16.3 16.3 0 0 1-16.1 13.9zm.1-31.2A14.5 14.5 0 0 0 8.2 16.7a14.6 14.6 0 0 0 12 16.9l2.3.2A14.8 14.8 0 0 0 37 21.3 14.6 14.6 0 0 0 24.9 4.4a8.6 8.6 0 0 0-2.3-.2zm-.1 27.4l-1.9-.2a12.1 12.1 0 0 1-8.1-5 13 13 0 0 1-2.2-9.4A12.5 12.5 0 0 1 22.6 6.4h2a11.9 11.9 0 0 1 8 5.1 11.9 11.9 0 0 1 2.2 9.3 12.5 12.5 0 0 1-12.3 10.8zM22.6 8a10.9 10.9 0 0 0-10.7 9.3 11.3 11.3 0 0 0 1.9 8.2 10.7 10.7 0 0 0 7 4.3l1.7.2a10.8 10.8 0 0 0 10.7-9.3 10.9 10.9 0 0 0-1.9-8.2 10.6 10.6 0 0 0-7-4.4z" fill="#7f746b"/>
    <circle cx="58.1" cy="61.7" r="35.9" fill="#d6dee1"/>
    <path d="M54.3 97.9A36.7 36.7 0 1 1 91 61.2a36.8 36.8 0 0 1-36.7 36.7zm0-71.8a35.1 35.1 0 1 0 35.1 35.1 35.1 35.1 0 0 0-35.1-35.1z" fill="#7f746b"/>
    <path d="M54.3 90.1a29 29 0 1 1 29-28.9 29 29 0 0 1-29 28.9zm0-57.4a28.5 28.5 0 1 0 28.5 28.5 28.5 28.5 0 0 0-28.5-28.5z" fill="#7f746b"/>
    <circle cx="54.3" cy="61.2" r="25.1" fill="#e6edef"/>
    <g fill="#7f746b">
      <circle cx="42.2" cy="45.8" r="1.1"/>
      <circle cx="51.7" cy="41.6" r="1.1"/>
      <circle cx="61.8" cy="43.1" r="1.1"/>
      <circle cx="70.2" cy="49.3" r="1.1"/>
      <circle cx="74.1" cy="58.8" r="1.1"/>
      <circle cx="73.6" cy="68.6" r="1.1"/>
      <circle cx="66.9" cy="77.1" r="1.1"/>
      <circle cx="57.4" cy="81.3" r="1.1"/>
      <circle cx="47.3" cy="79.9" r="1.1"/>
      <circle cx="38.8" cy="73.8" r="1.1"/>
      <circle cx="34.4" cy="64" r="1.1"/>
      <circle cx="35.8" cy="53.7" r="1.1"/>
    </g>
    <g fill="#7f746b" ref="hand">
      <circle cx="54.1" cy="61.9" r="1.7"/>
      <path d="M58.5 54.9L44.2 80.6l13.2-26.3 1.1.6z"/>
    </g>
    <path fill="#b8bfc1" d="M30 22.5l-6.2 4.7 5.7 7.7 6.8-5.1-6.3-7.3z"/>
    <path d="M29.3 36l-6.6-8.9 7.4-5.8 7.4 8.6zm-4.4-8.6l4.7 6.4 5.5-4.1-5.2-6.1z" fill="#7f746b"/>
    <path d="M30.9 20.2a2.1 2.1 0 0 1-.4 3.1l-5.8 4.6a2.1 2.1 0 0 1-3.1-.4L17.2 22a2.1 2.1 0 0 1 .4-3.1l5.8-4.6a2.2 2.2 0 0 1 3.1.3z" fill="#d6dee1"/>
    <path d="M23.3 29.2a3 3 0 0 1-2.4-1.2l-4.3-5.5a2.9 2.9 0 0 1-.7-2.2 2.8 2.8 0 0 1 1.2-2.1l5.8-4.6a3.1 3.1 0 0 1 1.9-.6 3.2 3.2 0 0 1 2.4 1.1l4.3 5.6a2.9 2.9 0 0 1 .7 2.2 2.8 2.8 0 0 1-1.2 2l-5.8 4.6a2.6 2.6 0 0 1-1.9.7zm1.5-14.6a1.6 1.6 0 0 0-.9.3l-5.8 4.6a1.8 1.8 0 0 0-.6.9 2 2 0 0 0 .3 1.1l4.4 5.5a1.5 1.5 0 0 0 2 .3l5.8-4.6a2.1 2.1 0 0 0 .6-1 1.7 1.7 0 0 0-.3-1l-4.4-5.6a1.6 1.6 0 0 0-1.1-.5z" fill="#7f746b"/>
    <g fill="#7f746b">
      <path d="M18.775 20.04l.388-.314 6.174 7.597-.388.315zM19.949 18.853l.388-.315 6.174 7.597-.388.315zM21.29 17.935l.388-.316 6.175 7.598-.388.315zM22.568 16.939l.388-.316 6.175 7.598-.388.315zM23.732 16.083l.388-.315 6.18 7.605-.387.316z"/>
    </g>
  </svg>
</template>

<script>
import { TimelineMax, Elastic, Circ } from 'gsap'

export default {
  methods: {
    watchStart() {
      var tl = new TimelineMax()

      tl.to(this.$refs.hand, 2, {
        rotation: 100,
        svgOrigin: '54 61',
        ease: Elastic.easeOut
      })
      tl.to(
        this.$refs.hand,
        0.5,
        {
          rotation: 0,
          svgOrigin: '54 61',
          ease: Circ.easeIn
        },
        '-=1'
      )
    }
  }
}
</script>